{% extends "base.html" %}

{% block title %}Mesas{% endblock %}

{% block js %}
<script type="text/javascript" src="/media/js/mesa.js"></script>
{% endblock %}

{% block conteudo %}
<script type="text/javascript">
$(document).ready(function() {
    document.getElementById('page_center').scrollIntoView();
});
</script>

<section class="mesas">
{% autoescape off %}
{% if aviso %}
<p id="aviso">{{ aviso }}</p>
{% endif %}
{% if mensagem %}
<p id="mensagem">{{ mensagem }}</p>
{% endif %}
{% endautoescape %}

{% if etapa == 1 %}
<script type="text/javascript">
$(document).ready(function() {
    $('input[name=mesas]').change(function() {
    	var n = $( "input:checked" ).length;
    	if (n >= 2) {
    		$("input[name=unir]").slideDown("slow");
    	} else {
    		$("input[name=unir]").slideUp("slow");
    	}
    });
});
</script>
<h2>Selecione as mesas que deseja unir</h2>
<form action="" method="POST">
{% csrf_token %}
<input type="hidden" name="etapa" value="1" />
<input style="padding: 4px 20px 4px 20px; display: none;" type="submit" name="unir" value="Unir" /><br /><br />

{% for mesa in mesas %}
{% if mesa.pedidos.count == 1 %}
<div style="float: left;">
    <div style="float: left; border: 1px solid gray; border-right: 0; padding: 10px; padding-right: 5px"><input type="checkbox" name="mesas" value="{{ mesa.id }}" style="margin: 0; padding: 0;" /></div>
    <div style="float: left; border: 1px solid gray; border-left: 0; padding: 10px; padding-left: 5px; margin-right: 10px; margin-bottom: 10px;">{{ mesa }}</div>
</div>
{% endif %} 
{% endfor %}
<p style="clear: both;"></p>
</form>

{% elif etapa == 2 %}
<script type="text/javascript">
$(document).ready(function() {
	$('input[name=mesa]').change(function() {
		$("input[name=aplicar]").slideDown("slow");
	});
});
</script>
<h2>Selecione a que será usada</h2>
<form action="" method="POST" onsubmit="return confirm('Esta ação não poderá ser desfeita. Deseja continuar?');">
{% csrf_token %}
<input type="hidden" name="etapa" value="2" />
<input type="hidden" name="mesas_selecionadas" value="{{ mesas_selecionadas }}" />
<a class="voltar" href="">Voltar</a>
<input style="padding: 4px 20px 4px 20px; display: none;" type="submit" name="aplicar" value="Aplicar mudança" /><br /><br />

{% for mesa in mesas %}
{% if mesa.pedidos.count == 0 or mesa.selecionada %}
<div style="float: left;">
    <div style="float: left; border: 1px solid gray; border-right: 0; padding: 10px; padding-right: 5px"><input type="radio" name="mesa" value="{{ mesa.id }}" style="margin: 0; padding: 0;" /></div>
    <div style="float: left; border: 1px solid gray; border-left: 0; padding: 10px; padding-left: 5px; margin-right: 10px; margin-bottom: 10px;">{{ mesa }}</div>
</div>
{% endif %} 
{% endfor %}
<p style="clear: both;"></p>
</form>
{% elif etapa == 3 %}
{{ mesas_selecionadas }} para {{ mesa }}
{% endif %}

</section>
{% endblock %}

